<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<script type="text/javascript" src="lib/vue-2.6.10.js"></script>
	<body>
		
		<div id="app">
			<h1>{{ title }}</h1>	
			
			<my-lists>
				<ul slot="nvmingxing">
					<li>古力娜扎</li>
					<li>迪丽热巴</li>
					<li>赵韩樱子</li>
				</ul>
				<template v-slot:xiaoxianrou>
					<ul>
						<li>宋祖儿</li>
						<li>张雪迎</li>
						<li>赵今麦</li>
						<li>张子枫</li>
					</ul>
				</template>


				<ul>
					<li>唐嫣</li>
					<li>景甜</li>
					<li>江疏影</li>
				</ul>
				
			</my-lists>
		</div>
		
		<template id="lists">
			<div>
				<h3>男明星</h3>
				<ul>
					<li>李易峰</li>
					<li>陈伟霆</li>
					<li>胡歌</li>
					<li>靳东</li>
				</ul>
				<h3>女明星</h3>
				<ul>
					<li>陈瑶</li>
					<li>梁洁</li>
					<li>周洁琼</li>
					<li>张天爱</li>
				</ul>
				<slot name="nvmingxing"></slot>
				
				<h3>小鲜肉</h3>

				<slot name="xiaoxianrou"></slot>

				<slot></slot>

				
			</div>
		</template>

		<script type="text/javascript">
			
			Vue.component('my-lists',{
				template:"#lists",
			});


			const vm = new Vue({
				el:"#app",
				data:{
					title:'卡槽',
				},
			
			});

		</script>
	</body>
</html>